<template>
  <div class="" style="margin-bottom:15px">
    <el-card>
      <!--<el-skeleton class="" style="padding: 10px" :loading="loading" animated>-->
        <!--<template slot="template">
          <el-skeleton-item variant="caption" style="width: 50%" />
          <el-skeleton-item variant="p" style="margin-top: 16px" />
          <el-skeleton-item variant="text" style="margin-top: 16px;width: 30%" />
          <el-skeleton-item variant="text" style="margin-top: 16px" />
          <el-skeleton-item variant="text" style="margin-top: 16px;width: 60%" />
          <div style="margin-top: 16px;display: flex">
            <el-skeleton-item variant="text" style="margin-right: 16px;" />
            <el-skeleton-item variant="text" style="width: 30%;" />
          </div>
        </template>-->
        <template>
          <div v-loading="loading" style="text-align:center">
            <el-row :gutter="0">
              <el-col :sm="24">
                <el-date-picker
                  v-model="range_date"
                  type="daterange"
                  range-separator="-"
                  value-format="yyyy-MM-dd"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="max-width:280px"
                  @change="echartMemberChange()"
                />
              </el-col>
            </el-row>
            <el-row :gutter="0">
              <el-col :sm="24">
                <div :id="id" :class="className" :style="{height:height,width:width}"/>
              </el-col>
            </el-row>
          </div>
        </template>
      <!--</el-skeleton>-->
    </el-card>
  </div>
</template>

<script>
// ECharts
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口
import * as echarts from 'echarts/core'
// 引入图表，图表后缀都为 Chart
import {LineChart} from 'echarts/charts'
// 引入组件，组件后缀都为 Component
import {TitleComponent, LegendComponent, TooltipComponent, GridComponent} from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {CanvasRenderer} from 'echarts/renderers'
// 注册必须的组件
echarts.use([LineChart, TitleComponent, LegendComponent, TooltipComponent, GridComponent, CanvasRenderer])

//import resize from './mixins/resize'
import resize from '@/components/Charts/mixins/resize'
import {member as apiMember} from '@/api/admin'

export default {
  name: 'IndexMember',
  components: {},
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'echartMember'
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    // chartData: {
    //   type: Object,
    //   required: true
    // }
  },
  data() {
    return {
      loading: true,
      range_date: [],
      chart: null
    }
  },
  computed: {},
  created() {
    //this.initChart()
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.loading = true
      apiMember().then(res => {
        this.dates = res.data.dates
        //this.chartData = res.data
        //console.log(document.getElementById(this.id)) // 用骨架屏获取不到
        this.chart = echarts.init(document.getElementById(this.id), 'macarons')
        this.setOptions(res.data)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    setOptions(chartData) {
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        legend: {
          data: ['新增会员', '活跃会员', '会员总数'],
          selected: {'会员总数': false},
          top: 15
        },
        grid: {
          /*left: '3%',
          right: '3%',
          bottom: '3%',*/
          left: 10,
          right: 10,
          bottom: 10,
          top: 60,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: chartData.days
        },
        yAxis: [
          {
            type : 'value',
            name : '数量',
            axisLabel : {
              formatter: '{value} 个'
            }
          },
          {
            type : 'value',
            name : '数量',
            axisLabel : {
              formatter: '{value} 个'
            }
          }
        ],
        series: [
          {
            name: '新增会员',
            type: 'line',
            smooth: true,
            data: chartData.news,
            label: {
              show: true,
              position: 'top'
            },
            itemStyle: {
              normal: {
                color: '#FF005A',
                lineStyle: {
                  color: '#FF005A',
                  width: 2
                }
              }
            }
          },
          {
            name: '活跃会员',
            type: 'line',
            smooth: true,
            data: chartData.actives,
            label: {
              show: true,
              position: 'top'
            }
          },
          {
            name: '会员总数',
            type: 'line',
            yAxisIndex: 1,
            smooth: true,
            data: chartData.totals,
            label: {
              show: true,
              position: 'top'
            }
          }
        ]
      }
      this.chart.setOption(option)
    },

    echartMemberChange() {
      this.loading = true
      apiMember({
        dates: this.dates
      }).then(res => {
        this.setOptions(res.data)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
  }
}
</script>
